<template>
	<div class="container">
		<div class="item">
			<view class="avatar-wrapper" @click="chooseImage"><img :src="photo" mode="aspectFill" alt="无头像喵"
					class="avatar" /></view>
			<!-- <img src="../../static/头像.jpg" @click="previewImage" alt="无头像喵" mode="widthFix" class="avatar" -->
			<!-- style="width: 80px; margin-bottom: 0px" /> -->
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">姓名</div>
			<input type="text" :value="userData.childrenName" @input="userData.childrenName = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">性别</div>
			<input type="text" :value="userData.sex" @input="userData.sex = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">年龄</div>
			<input type="text" :value="userData.age" @input="userData.age = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">所在地</div>
			<input type="text" :value="userData.location" @input="userData.location = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">个人签名</div>
			<input type="text" :value="userData.signature" @input="userData.signature = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">联系人</div>
			<input type="text" :value="userData.contactName" @input="userData.contactName = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">教育水平</div>
			<input type="text" :value="userData.eduQualification"
				@input="userData.eduQualification = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">收入水平</div>
			<input type="text" :value="userData.income" @input="userData.income = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">手机号</div>
			<input type="text" :value="userData.telephone" @input="userData.telephone = $event.target.value" />
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="label">微信号</div>
			<input type="text" :value="userData.wechatNumber" @input="userData.wechatNumber = $event.target.value" />
		</div>
		<div class="line"></div>
		<view class="btn-dock">
			<button class="btn-cancel" @click="editcancel()">取消</button>
			<button class="btn-save" form-type="submit" @click="edit()">保存</button>
		</view>
	</div>
</template>

<script>
	import {
		BASE_URL
	} from '/api';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['token', 'children'])
		},
		data() {
			return {
				name: "张三",
				wechat: "zhangsan123",
				phone: "12345678901",
				income: "100000",
				gender: "男",
				address: "北京市海淀区",
				readonly: true,
				userData: {},
				photo: '../../static/头像.jpg',
			};
		},
		onLoad(option) {
			console.log(option.data)
			this.userData = JSON.parse(option.data);
			this.photo = JSON.parse(option.photo);
			console.log(this.userData)
		},
		onShow() {
			uni.request({
				url: BASE_URL + '/photo/selectOneByChildrenId',
				method: 'GET',
				header: {
					"Authorization": this.token,
				},
				data: {
					children_id: this.userData.childrenId,
				},
				success: (res) => {
					console.log(res.data);
					this.photo = res.data.data;
					console.log(this.photo);
					this.text = 'request success';
					console.log(this.text);
				}
			});
		},
		methods: {
			reload() {
				// 页面重载
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
				// 执行刷新
			},
			previewImage() {
				uni.previewImage({
					urls: ["../../static/头像.jpg"],
					current: "../../static/头像.jpg",
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			edit() {
				//console.log(this.userData.childrenName)
				uni.request({
					url: BASE_URL + '/children?childrenId=' + this.userData.childrenId,
					method: 'PUT',
					header: {
						"Authorization": this.token,
					},
					data: {
						name: this.userData.childrenName,
						age: this.userData.age,
						income: this.userData.income,
						signature: this.userData.signature,
						wechatNumber: this.userData.wechatNumber,
						telephone: this.userData.telephone,
						contactName: this.userData.contactName,
						eduQualification: this.userData.eduQualification,
						sex: this.userData.sex,
						location: this.userData.location,
					},
					success: (res) => {
						this.text = 'request success';
						console.log(this.text);
						uni.switchTab({
							url: '../my/my',
							success: () => {
								console.log(1);
							},
							fail: (res) => {
								console.log('navigate failed', res);
							}
						})
					}
				});
			},
			editcancel() {
				uni.switchTab({
					url: '../my/my',
					success: () => {
						console.log(1);
					},
					fail: (res) => {
						console.log('navigate failed', res);
					}
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (res) => {
						const tempFilePaths = res.tempFilePaths //图片临时数组
						console.log(tempFilePaths)
						uni.uploadFile({
							//请求的url接口地址
							url: BASE_URL + '/photo/upload',
							formData: {
								//请求中接口额外的参数
								children_id: this.userData.childrenId
							},
							fileType: 'image', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'file', //对应接口的文件名称
							header: { //请求头
								"Content-Type": "multipart/form-data",
								"Authorization": this.token,
							},
							success: (res) => {
								//成功的回调
								//一般用于重新获取数据渲染页面
								console.log(JSON.parse(res.data).data.minIoUrl)
								this.photo = JSON.parse(res.data).data.minIoUrl;
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
							}
						})
					}
				})
				this.$forceUpdate();
			},

		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.item {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.label {
		font-weight: bold;
		margin-right: 10px;
	}

	.line {
		height: 1px;
		background-color: #ccc;
		margin: 10px 0;
	}

	.avatar-wrapper {
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		/* margin-right: 40upx; */
		margin-top: 20upx;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar {
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>